{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
<style>
    .td-do-div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100px;
        flex-wrap: wrap;
    }

    .td-do-div a {
        margin-top: 3px;
    }
</style>
<script>
    $(function () {
        $(window).resize(function () {
            $('#table').bootstrapTable('destroy').bootstrapTable(
                {
                    height: $(window).height() - 320,
                });
        });
        $('#table').bootstrapTable('destroy').bootstrapTable(
            {
                cache:true,
                height: $(window).height() - 320,
                fixedColumns: true,
                fixedNumber: 4,
                onClickRow: function (row, $element) {
                    $('.info').removeClass('info');//移除class
                    $($element).addClass('info');//添加class
                },
            });
    });
</script>
<!--数据列表页面-->
<section class="content">

    <!--顶部搜索筛选-->
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    <form class="form-inline searchForm" id="searchForm" action="{:url('index')}" method="GET">
                        <div class="form-group">
                            <select name="staff_id" id="staff_id" class="form-control field-select"
                                    data-placeholder="请选择员工">
                                <option value="">请选择员工</option>
                                {foreach name='staff_list' id='item'}
                                <option value="{$item.id}" {if isset($staff_id) && $staff_id==$item.id}selected{/if}>
                                    {$item.name}
                                </option>
                                {/foreach}
                            </select>
                        </div>
                        <script>
                            $('#staff_id').select2();
                        </script>

                        <div class="form-group">
                            <select name="department_id" id="department_id" class="form-control field-select"
                                    data-placeholder="请选择部门">
                                <option value=""></option>
                                {$department_list|raw}
                            </select>
                        </div>
                        <script>
                            $('#department_id').select2();
                        </script>
                        <div class="form-group">
                            <div class="col-md-2">
                                <input id="salary_time" name="salary_time"
                                       value="{if isset($salary_time)}{$salary_time}{else}{/if}" placeholder="请工资时间"
                                       type="text" class="form-control filed-datetime" autocomplete="off">
                            </div>
                        </div>
                        <script>
                            $('#staff_id').select2();
                            $('#department_id').select2();
                            var currentTime = '';
                            if ($('#salary_time').val()) {
                                currentTime = $('#salary_time').val();
                            }
                            laydate.render({
                                elem: '#salary_time',
                                type: 'month',
                                btns: [],
                                value: currentTime,
                                ready: function (date) {
                                    $(".layui-laydate").on('click', 'ul li', function () {
                                        $(".layui-laydate").remove();
                                    });
                                },
                                change: function (value) {
                                    $("#salary_time").val(value);
                                }
                            });
                        </script>
                        <div class="form-group">
                            <select name="_order" id="_order" class="form-control input-sm index-order">
                                <option value="">排序字段</option>
                                <option value="id" {if isset($_order) && $_order=='id'}selected{/if}>
                                    ID
                                </option>
                                <option value="staff_id" {if isset($_order) && $_order=='staff_id'}selected{/if}>
                                    用户id
                                </option>
                                <option value="base_merit_salary" {if isset($_order) &&
                                        $_order=='base_merit_salary'}selected{/if}>
                                    绩效基数
                                </option>
                                <option value="total_fixed_salary" {if isset($_order) &&
                                        $_order=='total_fixed_salary'}selected{/if}>
                                    固定工资合计
                                </option>
                                <option value="real_total_fixed_salary" {if isset($_order) &&
                                        $_order=='real_total_fixed_salary'}selected{/if}>
                                    实际固定工资合计
                                </option>
                                <option value="total_payoff" {if isset($_order) &&
                                        $_order=='total_payoff'}selected{/if}>
                                    应发工资合计
                                </option>
                                <option value="real_pay" {if isset($_order) && $_order=='real_pay'}selected{/if}>
                                    实发工资
                                </option>
                                <option value="after_tax_insurance_salary" {if isset($_order) &&
                                        $_order=='after_tax_insurance_salary'}selected{/if}>
                                    税后险后工资
                                </option>
                                <option value="personal_pay" {if isset($_order) &&
                                        $_order=='personal_pay'}selected{/if}>
                                    个户发放
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <select name="_by" id="_by" class="form-control input-sm index-order">
                                <option value="">排序方式</option>
                                <option value="desc" {if isset($_by) && $_by=='desc'}selected{/if}>倒序</option>
                                <option value="asc" {if isset($_by) && $_by=='asc'}selected{/if}>正序</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-search"></i> 查询
                            </button>
                        </div>
                        <div class="form-group">
                            <button onclick="exportData()" class="btn btn-sm btn-warning exportData" type="button"><i
                                    class="fa fa-search"></i> 导出
                            </button>
                        </div>
                        <div class="form-group">
                            <button onclick="clearSearchForm()" class="btn btn-sm btn-default" type="button"><i
                                    class="fa  fa-eraser"></i> 清空查询
                            </button>
                        </div>
                        <div class="form-group">
                            <button onclick="salaryComposeAll()" class="btn btn-sm btn-adn" type="button"><i
                                    class="fa  fa-forward"></i> 一键生成
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box">

                <!--数据列表顶部-->
                <div class="box-header">
                    <div>
                        <a title="添加" data-toggle="tooltip" class="btn btn-primary btn-sm " href="{:url('add')}">
                            <i class="fa fa-plus"></i> 添加
                        </a>
                        <a class="btn btn-danger btn-sm AjaxButton" data-toggle="tooltip" title="删除选中数据"
                           data-confirm-title="删除确认" data-confirm-content="您确定要删除选中的数据吗？" data-id="checked"
                           data-url="{:url('del')}">
                            <i class="fa fa-trash"></i> 删除
                        </a>
                        <a class="btn btn-success btn-sm AjaxButton" data-toggle="tooltip" title="启用选中数据"
                           data-confirm-title="启用确认" data-confirm-content="您确定要启用选中的数据吗？" data-id="checked"
                           data-url="{:url('enable')}">
                            <i class="fa fa-circle"></i> 启用
                        </a>

                        <a class="btn btn-warning btn-sm AjaxButton" data-toggle="tooltip" title="禁用选中数据"
                           data-confirm-title="禁用确认" data-confirm-content="您确定要禁用选中的数据吗？" data-id="checked"
                           data-url="{:url('disable')}">
                            <i class="fa fa-circle"></i> 禁用
                        </a>

                        <a class="btn btn-success btn-sm ReloadButton" data-toggle="tooltip" title="刷新">
                            <i class="fa fa-refresh"></i> 刷新
                        </a>
                    </div>
                </div>

                <div class="box-body table-responsive">
                    <table class="table table-hover table-striped table-bordered table-condensed datatable" id="table"
                           data-toggle="table">
                        <thead>
                        <tr>
                            <th>
                                <input id="dataCheckAll" type="checkbox" onclick="checkAll(this)" class="checkbox"
                                       placeholder="全选/取消">
                            </th>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>工资日期</th>
                            <th>部门</th>
                            <th>市场职级</th>
                            <th>险种</th>
                            <th>入职日期</th>
                            <th>基本工资</th>
                            <th>管理工资</th>
                            <th>职称津贴</th>
                            <th>学历津贴</th>
                            <th>夜班津贴</th>
                            <th>薪级津贴</th>
                            <th>保密工资</th>
                            <th>加班工资</th>
                            <th>全勤奖</th>
                            <th>通讯补助</th>
                            <th>住房补贴</th>
                            <th>其他补助</th>
                            <th>绩效工资基数</th>
                            <th>固定工资合计</th>
                            <th>绩效工资</th>
                            <th>实际固定工资</th>
                            <th>提成</th>
                            <th>直播提成</th>
                            <th>奖惩</th>
                            <th>迟到扣款</th>
                            <th>病假补助</th>
                            <th>事假扣款</th>
                            <th>旷工扣款</th>
                            <th>存班折现</th>
                            <th>交通补助</th>
                            <th>补/缺卡扣款</th>
                            <th>其他项</th>
                            <th>应发工资合计</th>
                            <th>社保工资</th>
                            <th>扣社保</th>
                            <th>计税工资</th>
                            <th>个人所得税</th>
                            <th>税后险后工资</th>
                            <th>个人发放</th>
                            <th>实发工资</th>
                            <th>备注</th>
                            <th>计算信息</th>
                            <th>扣款</th>
                            <th>姓名1</th>
                            <th>工资卡号</th>
                            <th>附件</th>
                            <th>状态</th>
                            <th>邮件状态</th>
                            <th>更新日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach name="data" item="item"}
                        <tr>
                            <td>
                                <input type="checkbox" onclick="checkThis(this)" name="data-checkbox"
                                       data-id="{$item.id}" class="checkbox data-list-check" value="{$item.id}"
                                       placeholder="选择/取消">
                            </td>
                            <td>{$item.id}</td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.staff_name}</p></td>
                            <td><p class="salary_time">
                                <p style=" white-space: nowrap; text-overflow: ellipsis;">{if
                                    $item.salary_time}{$item.salary_time |date='Y-m'}{else}{/if}</p></td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.department_name }</p>
                            </td>
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.position_level }</p>
                            </td>
                            <!--                            <td><p class="salary_time">{if $item.salary_time}{$item.salary_time|date='Y-m'}{else}{/if}</p></td>-->
                            <td><p style="white-space: nowrap; text-overflow: ellipsis;">{$item.insure_name}</p></td>
                            <td><p style=" white-space: nowrap; text-overflow: ellipsis;">{$item.hired_date}</p></td>
                            <td>{$item.basic_salary}</td>
                            <td>{$item.manage_salary}</td>
                            <td>{$item.title_salary}</td>
                            <td>{$item.education_salary}</td>
                            <td>{$item.nightwork_salary}</td>
                            <td>{$item.payscale_salary}</td>
                            <td>{$item.secret_salary}</td>
                            <td>{$item.overtime_salary}</td>
                            <td>{$item.fulltime_salary}</td>
                            <td>{$item.phone_salary}</td>
                            <td>{$item.housing_salary}</td>
                            <td>{$item.other_salary}</td>
                            <td>{$item.base_merit_salary}</td>
                            <td>{$item.total_fixed_salary}</td>
                            <td>{$item.merit_salary}</td>
                            <td>{$item.real_total_fixed_salary}</td>
                            <td>{$item.commission}</td>
                            <td>{$item.live_commission}</td>
                            <td>{$item.bonus_penalty}</td>
                            <td>{$item.late_cut}</td>
                            <td>{$item.sick_allowance}</td>
                            <td>{$item.absence_leave_cut}</td>
                            <td>{$item.absenteeism_cut}</td>
                            <td>{$item.storage_time_cash}</td>
                            <td>{$item.travel_allowance}</td>
                            <td>{$item.repair_miss_card_cut}</td>
                            <td>{$item.other}</td>
                            <td>{$item.total_payoff}</td>
                            <td>{$item.social_security_salary}</td>
                            <td>{$item.deduct_social_money}</td>
                            <td>{$item.taxable_salary}</td>
                            <td>{$item.personal_tax}</td>
                            <td>{$item.after_tax_insurance_salary}</td>
                            <td>{$item.personal_pay}</td>
                            <td>{$item.real_pay}</td>
                            <td><p style="width: 320px; overflow: hidden;white-space:normal;text-overflow: ellipsis;">
                                {$item.remarks}</p></td>
                            <td>
                                <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                                    {$item.info}</p></td>
                            <td>{$item.cut_cash}</td>
                            <td><p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                                {$item.card_name}</p></td>
                            <td>{$item.card_num}</td>
                            <td class="dataListMultiImg" id="fileImgViewer">
                                {foreach name='item.file' id='item_file'}
                                <img class="dataListImg" data-img="{$item_file}" src="{$item_file}">
                                {/foreach}
                            </td>
                            <script>
                                $(function () {
                                    $('#fileImgViewer').viewer({
                                        url: 'data-img',
                                    });
                                });
                            </script>
                            <td>{if $item.status==1}启用{else}禁用{/if}</td>
                            <td>{if $item.email_status==1}已发送{else}未发送{/if}</td>
                            <td><p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{if
                                $item.update_time}{$item.update_time | date='Y-m-d H:i'}{else}{/if}</p></td>
                            {if $item.id neq ''}
                            <td class="td-do">
                                <div class="td-do-div">
                                    <a href="{:url('edit',['id'=>$item.id])}" class="btn btn-primary btn-xs" title="修改"
                                       data-toggle="tooltip">
                                        <i class="fa fa-pencil"></i>
                                    </a>

                                    <a data-id="{$item.staff_id}"
                                       data-time="{if $item.salary_time}{$item.salary_time |date='Y-m'}{else}{if isset($salary_time)}{$salary_time}{else}{:date('Y-m', strtotime(date('Y-m-01') . ' - 1 month'))}{/if}{/if}"
                                       data-opea="basicSalary" data-url="view" data-type="2" data-confirm="2" title="基数"
                                       data-toggle="tooltip" class="infos btn btn-facebook btn-xs AjaxButton">
                                        <i class="fa fa-anchor"></i>
                                    </a>
                                    <a data-id="{$item.staff_id}"
                                       data-time="{if $item.salary_time}{$item.salary_time |date='Y-m'}{else}{if isset($salary_time)}{$salary_time}{else}{:date('Y-m', strtotime(date('Y-m-01') . ' - 1 month'))}{/if}{/if}"
                                       data-opea="performance" data-url="view" data-type="2" data-confirm="2" title="绩效"
                                       data-toggle="tooltip" class="infos btn btn-reddit btn-xs AjaxButton">
                                        <i class="fa fa-bar-chart"></i>
                                    </a>
                                    <a data-id="{$item.staff_id}"
                                       data-time="{if $item.salary_time}{$item.salary_time |date='Y-m'}{else}{if isset($salary_time)}{$salary_time}{else}{:date('Y-m', strtotime(date('Y-m-01') . ' - 1 month'))}{/if}{/if}"
                                       data-opea="commission" data-url="view" data-type="2" data-confirm="2" title="提成"
                                       data-toggle="tooltip"
                                       class="infos btn btn-default btn-success btn-xs AjaxButton" title="提成"
                                       data-toggle="tooltip">
                                        <i class="fa fa-calculator"></i>
                                    </a>

                                    <a data-id="{$item.staff_id}"
                                       data-time="{if $item.salary_time}{$item.salary_time |date='Y-m'}{else}{if isset($salary_time)}{$salary_time}{else}{:date('Y-m', strtotime(date('Y-m-01') . ' - 1 month'))}{/if}{/if}"
                                       data-opea="attendance" data-url="view" data-type="2" data-confirm="2" title="考勤"
                                       data-toggle="tooltip"
                                       class="infos btn btn-primary btn-warning btn-xs AjaxButton" title="考勤"
                                       data-toggle="tooltip">
                                        <i class="fa fa-calendar"></i>
                                    </a>

                                    <a href="{:url('email/email',['staff_id'=>$item.staff_id,'salary_time'=>date('Y-m',$item.salary_time)])}"
                                       class="btn btn-adn btn-xs" title="邮件" data-toggle="tooltip">
                                        <i class="fa fa-envelope"></i>
                                    </a>
                                    <a class="btn btn-danger btn-xs AjaxButton" data-toggle="tooltip" title="删除"
                                       data-id="{$item.id}" data-confirm-title="删除确认"
                                       data-confirm-content='您确定要删除ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                       data-url="{:url('del')}">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                    {if $item.status==1}
                                    <a class="btn btn-warning btn-xs AjaxButton" data-toggle="tooltip" title="禁用"
                                       data-id="{$item.id}" data-confirm-title="禁用确认"
                                       data-confirm-content='您确定要禁用ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                       data-url="{:url('disable')}">
                                        <i class="fa fa-circle"></i>
                                    </a>
                                    {else/}
                                    <a class="btn btn-success btn-xs AjaxButton" data-toggle="tooltip" title="启用"
                                       data-id="{$item.id}" data-confirm-title="启用确认"
                                       data-confirm-content='您确定要启用ID为 <span class="text-red">{$item.id}</span> 的数据吗'
                                       data-url="{:url('enable')}">
                                        <i class="fa fa-circle"></i>
                                    </a>
                                    {/if}
                                </div>


                            </td>
                            {else}

                            <td class="td-do">
                                <a onclick="test(this)"
                                   class="btn btn-primary btn-xs " id="shengcheng" title="生成"
                                   data-department_id="{$item.department_id}" data-staffid="{$item.staff_id}">
                                    <i class="fa fa-forward"></i>
                                </a>
                            </td>

                            {/if}
                        </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>

                <!--                <table class="table table-hover table-striped table-bordered table-condensed datatable" id="table"-->
                <!--                       style="table-layout: fixed;-->
                <!--                       word-break:break-all;">-->
                <!--                </table>-->
                <!-- 数据列表底部 -->
                <div class="box-footer">
                    {$page|raw}
                    <label class="control-label pull-right" style="margin-right: 10px; font-weight: 100;">
                        <small>共{$total}条记录</small>&nbsp;
                        <small>每页显示</small>
                        &nbsp;
                        <select class="input-sm" onchange="changePerPage(this)">
                            <option value="10" {if $admin.per_page==10}selected{/if}>10</option>
                            <option value="20" {if $admin.per_page==20}selected{/if}>20</option>
                            <option value="30" {if $admin.per_page==30}selected{/if}>30</option>
                            <option value="50" {if $admin.per_page==50}selected{/if}>50</option>
                            <option value="100" {if $admin.per_page==100}selected{/if}>100</option>
                        </select>
                        &nbsp;
                        <small>条记录</small>
                    </label>
                </div>

            </div>
        </div>
    </div>
</section>
<script>


    function test(that) {
        var salary_time = $('#salary_time').val();
        if (salary_time === '') {
            layer.alert('请先选择时间', {
                icon: 0,
            })
            return false;
        } else {
            var staff_id = $(that).attr('data-staffid');
            var department_id = $(that).attr('data-department_id');
            location.href = "{:url('add')}?staff_id=" + staff_id + "&salary_time=" + salary_time + '&department_id=' + department_id;
        }
    }

    function salaryComposeAll() {
        let salary_time = $('#salary_time').val();
        if (salary_time == '') {
            layer.alert('请选择工资时间', {icon: 0});
            return false;
        }
        let url = "{:url('composeAll')}" + '?' + $("#searchForm").serialize();
        var index = layer.load(2, {
            shade: [0.6, '#000'] //0.1透明度的白色背景
        });

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                layer.closeAll('loading');
                if (res.code == 0) {
                    layer.alert(res.msg, {icon: 0})
                }
                if (res.code == 1) {
                    $.pjax.reload();
                }
            },
            error: function (res) {
                layer.closeAll('loading');
                layer.alert(res.msg, {icon: 0});
            }
        })
    }
</script>
{/block}

